import { Button, Modal, Form, Input, Select, DatePicker } from 'antd';
import { useEffect,useState} from 'react';
import { useStore } from '../useStore';
import { http } from "@/utils/request";
import _ from "lodash"
import dayjs from 'dayjs';
const { TextArea } = Input;
export const AddChildrenModal = () => {
  const [form] = Form.useForm();
  const [addOrEditChildrenModal,childrenDetailData,childrenTable,addDataToChildrenTable,setDataToChildrenTable] = useStore((state)=>[
    state.addOrEditChildrenModal,
    state.childrenDetailData,
    state.childrenTable,
    state.addDataToChildrenTable,
    state.setDataToChildrenTable
  ])
  const [title,setTitle] = useState('新增子女信息')
  const handleOk = async () =>{
    const values = await form.validateFields();
    values.personId = '81800628'
    values.dateOfBirth = values.dateOfBirth ? dayjs(values.dateOfBirth).format("YYYY-MM-DD") : ""
    values.gender = values.gender.value
    values.healthStatus = values.healthStatus.value
    values.onlyChildCertificate = values.onlyChildCertificate.value
    
    if(title=='新增子女信息'){
      try {
        const res = await http.post({
          url: '/PmPersonChildren/add',
          data: values,
        })
        if(res.code==200){
          // 校验成功，执行保存操作并关闭Modal
          useStore.setState({addOrEditChildrenModal:{open:false}})
          addDataToChildrenTable(values)
        }
      } catch (errorInfo) {
        console.log('Failed:', errorInfo);
      }
    }else{
      const data= JSON.parse(JSON.stringify(childrenDetailData))
      values.id = data.id
      try {
        const res = await http.post({
          url: '/PmPersonChildren/update',
          data: values,
        })
        if(res.code==200){
          // 校验成功，执行保存操作并关闭Modal
          useStore.setState({addOrEditChildrenModal:{open:false}})
          setDataToChildrenTable(values)
        }
      } catch (errorInfo) {
        console.log('Failed:', errorInfo);
      }
    }
  }
  const handleCancel = () =>{
    useStore.setState({addOrEditChildrenModal:{open:false}})
  }
  useEffect(()=>{
    if(_.isEmpty(childrenDetailData.name)){
      setTitle('新增子女信息')
      form.resetFields();
    }else{
      const data= JSON.parse(JSON.stringify(childrenDetailData))
      if(data.dateOfBirth) data.dateOfBirth= dayjs(data.dateOfBirth)
      form.setFieldsValue(data)
      setTitle('修改子女信息')
    }
  },[addOrEditChildrenModal.open])
  return(
    <Modal title={title} open={addOrEditChildrenModal.open} onCancel={handleCancel} footer={[
      <Button key="back" onClick={handleCancel}>
        返回
      </Button>,
      <Button key="submit" htmlType="submit" type="primary" onClick={handleOk}>
        保存
      </Button>,
    ]}
    style={{ top: 10 }}
    >
      <Form form={form} labelCol={{ span: 5}} wrapperCol={{ span: 16 }} autoComplete='off'>
        <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名!' }]}>
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别!' }]}>
          <Select placeholder="请选择性别" labelInValue options={[
            { value: '1', label: '男' },
            { value: '2', label: '女' },
          ]} />
        </Form.Item>
        <Form.Item name="ethnicity" label="民族" rules={[{ required: true, message: '请输入民族!' }]}>
          <Input placeholder="请输入民族" />
        </Form.Item>
        <Form.Item name="dateOfBirth" label="出生年月" rules={[{ required: true, message: '请选择出生年月!' }]}>
          <DatePicker placeholder="请选择出生年月" style={{width:'100%'}} /> 
        </Form.Item>
        <Form.Item name="idNumber" label="身份证号码" rules={[{ required: true, message: '请输入身份证号码!' }]}>
          <Input placeholder="请输入身份证号码" />
        </Form.Item>
        <Form.Item name="onlyChildCertificate" label="是否独生子女" rules={[{ required: true, message: '请选择是否独生子女!' }]}>
          <Select placeholder="请选择" labelInValue options={[
            { value: '1', label: '是' },
            { value: '2', label: '否' },
          ]} />
        </Form.Item>
        <Form.Item name="currentStatus" label="现状" rules={[{ required: true, message: '请输入现状!' }]}>
          <Input placeholder="请输入现状" />
        </Form.Item>
        <Form.Item name="healthStatus" label="健康状态" rules={[{ required: true, message: '请选择健康状态!' }]}>
          <Select placeholder="请选择健康状态" labelInValue options={[
            { value: '1', label: '健康' },
            { value: '2', label: '良好' },
            { value: '3', label: '较差' },
          ]} />
        </Form.Item>
        <Form.Item name="mobilePhone" label="手机号码" rules={[{ required: true, message: '请输入手机号码!' }]}>
          <Input placeholder="请输入手机号码" />
        </Form.Item>
        <Form.Item name="specialty" label="特长">
          <TextArea
            showCount
            maxLength={200}
            placeholder="请输入特长"
            style={{ height: 120, resize: 'none' }}
          />
        </Form.Item>
        <Form.Item name="hobbies" label="兴趣爱好">
          <TextArea
            showCount
            maxLength={200}
            placeholder="请输入兴趣爱好"
            style={{ height: 120, resize: 'none' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
}